簡(jiǎn)介:通過本案例,你將會(huì)學(xué)習(xí)如何制作蒙版,詳細(xì)了解絕對(duì)定位的方法,全面掌握cookie的設(shè)定,更重要的是能夠用原生JavaScript代碼和JQuery兩種方式來對(duì)“新手引導(dǎo)”中引導(dǎo)單元的依次顯示。
第1章 新手引導(dǎo)簡(jiǎn)介
對(duì)案例的最終實(shí)現(xiàn)效果進(jìn)行展示,并把這個(gè)效果的實(shí)現(xiàn)思路進(jìn)行詳細(xì)分析。
第2章 HTML結(jié)構(gòu)介紹
對(duì)實(shí)現(xiàn)案例效果的HTML結(jié)構(gòu)布局進(jìn)行逐步實(shí)現(xiàn),添加蒙版、定義父塊及各個(gè)引導(dǎo)單元。
第3章 網(wǎng)頁蒙版設(shè)置
對(duì)網(wǎng)頁蒙版的高度、位置、透明度及瀏覽器的兼容情況進(jìn)行詳細(xì)講解。
第4章 引導(dǎo)單元定位
對(duì)父塊的寬度、位置、背景等參數(shù)進(jìn)行設(shè)置,并且利用絕對(duì)定位的方法對(duì)各個(gè)引導(dǎo)小單元進(jìn)行定位。
第5章 JavaScript控制引導(dǎo)單元的顯示
首先對(duì)引導(dǎo)單元的邏輯順序進(jìn)行分析,通過編寫JavaScript原碼,實(shí)現(xiàn)對(duì)各個(gè)引導(dǎo)單元的顯示順序進(jìn)行控制。
第6章 只為新手引導(dǎo)——Cookie的設(shè)定
詳細(xì)介紹cookie的添加和讀取。
第7章 另外一種交互實(shí)現(xiàn)方式——jQuery
對(duì)JavaScript源碼實(shí)現(xiàn)的引導(dǎo)單元的顯示效果,用jQuery進(jìn)行簡(jiǎn)化。